<template>
  <div v-loading="loading" :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons')
import resize from './mixins/resize'
import { moneyFormat } from '@/utils/ruoyi'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'provincialProjects'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    chartData: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      chart: null,
      loading: false,
      optionData: [],
      xAxis: [],
      bgArr: []
    }
  },
  watch: {
    chartData: {
      handler() {
        this.initChart()
      },
      deep: true,
      immediate: true
    }
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      if (this.chartData.length > 0) {
        this.xAxis = []
        this.bgArr = []
        this.chartData.forEach(item => {
          this.xAxis.push(item.areaName)
          var row = {
            name: this.$t(item.areaName),
            value: this.chartData[0].dealCount,
            fkAmount: item.fkAmount,
            gzAmount: item.gzAmount,
            hkAmount: item.hkAmount,
            provinceId: item.provinceId
          }
          this.bgArr.push(row)
        })
        this.optionData = this.chartData.map((item) => {
          return {
            name: this.$t(item.areaName),
            value: item.dealCount,
            fkAmount: item.fkAmount,
            gzAmount: item.gzAmount,
            hkAmount: item.hkAmount,
            provinceId: item.provinceId
          }
        })
      }
      // 左侧面
      const CubeLeft = echarts.graphic.extendShape({
        shape: { x: 0, y: 0 },
        buildPath: function(ctx, shape) {
          const xAxisPoint = shape.xAxisPoint
          const c0 = [shape.x, shape.y] // 左侧面右上角
          const c1 = [shape.x - 9, shape.y - 6] // 左侧面左上角
          const c2 = [xAxisPoint[0] - 9, xAxisPoint[1] - 6] // 左侧面左下角
          const c3 = [xAxisPoint[0], xAxisPoint[1]] // 左侧面右下角
          ctx
            .moveTo(c0[0], c0[1])
            .lineTo(c1[0], c1[1])
            .lineTo(c2[0], c2[1])
            .lineTo(c3[0], c3[1])
            .closePath()
        }
      })
      // 右侧面
      const CubeRight = echarts.graphic.extendShape({
        shape: { x: 0, y: 0 },
        buildPath: function(ctx, shape) {
          const xAxisPoint = shape.xAxisPoint
          const c1 = [shape.x, shape.y] // 右侧面左上
          const c2 = [xAxisPoint[0], xAxisPoint[1]] // 右侧面左下
          const c3 = [xAxisPoint[0] + 9, xAxisPoint[1] - 6] // 右侧面右下
          const c4 = [shape.x + 9, shape.y - 6] // 右侧面右上
          ctx
            .moveTo(c1[0], c1[1])
            .lineTo(c2[0], c2[1])
            .lineTo(c3[0], c3[1])
            .lineTo(c4[0], c4[1])
            .closePath()
        }
      })
      // 顶面
      const CubeTop = echarts.graphic.extendShape({
        shape: { x: 0, y: 0 },
        buildPath: function(ctx, shape) {
          const c1 = [shape.x, shape.y] // 下
          const c2 = [shape.x + 9, shape.y - 6] // 右
          const c3 = [shape.x, shape.y - 12] // 上
          const c4 = [shape.x - 9, shape.y - 6] // 左
          ctx
            .moveTo(c1[0], c1[1])
            .lineTo(c2[0], c2[1])
            .lineTo(c3[0], c3[1])
            .lineTo(c4[0], c4[1])
            .closePath()
        }
      })
      echarts.graphic.registerShape('CubeLeft', CubeLeft)
      echarts.graphic.registerShape('CubeRight', CubeRight)
      echarts.graphic.registerShape('CubeTop', CubeTop)

      this.chart = echarts.init(this.$el, '', { renderer: 'svg', useDirtyRect: false })
      this.chart.on('click', this.clickProvince)
      this.chart.setOption({
        grid: {
          left: this.fitChartFont(15),
          top: this.fitChartFont(90),
          right: this.fitChartFont(15),
          bottom: this.fitChartFont(10),
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          formatter: function(params) {
            var str = params[0].name + ':'
            params.filter(function(item) {
              str += '<br/>' + '项目数量(个)：' + item.value +
                '<br/>' + '投资成本(万)：' + moneyFormat(item.data.fkAmount, 'w') +
                '<br/>' + '回款金额(万)：' + moneyFormat(item.data.hkAmount, 'w') +
                '<br/>' + '最新估值(万)：' + moneyFormat(item.data.gzAmount, 'w')
            })
            return str
          }
        },
        xAxis: {
          type: 'category',
          data: this.xAxis, // 数据
          minInterval: 1,
          axisLabel: {
            color: '#fff',
            interval: 0 // 强制显示坐标轴标签
          },
          axisLine: {
            lineStyle: {
              color: '#3481AB'
            }
          },
          axisTick: false
        },
        yAxis: {
          name: '单位：个',
          nameTextStyle: {
            color: '#69A9D7'
          },
          type: 'value',
          axisTick: false,
          axisLabel: {
            color: '#E6F7FF'
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#3481AB'
            }
          },
          splitLine: {
            lineStyle: {
              type: 'dashed',
              opacity: 0.1
            }
          }
        },
        series: [
          {
            type: 'custom',
            showBackground: true,
            renderItem: (params, api) => {
              const location = api.coord([api.value(0), api.value(1)])
              return {
                type: 'group',
                children: [
                  {
                    type: 'CubeLeft',
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      xAxisPoint: api.coord([api.value(0), 0])
                    },
                    style: {
                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        // 左侧面
                        {
                          offset: 0,
                          color: '#00C5ED'
                        },
                        {
                          offset: 1,
                          color: 'rgba(9,53,122,1)'
                        }
                      ])
                    }
                  },
                  {
                    type: 'CubeRight',
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      xAxisPoint: api.coord([api.value(0), 0])
                    },
                    style: {
                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                          offset: 0,
                          color: '#036EA3'
                        },
                        {
                          offset: 1,
                          color: '#0D5473'
                        }
                      ])
                    }
                  },
                  {
                    type: 'CubeTop',
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      xAxisPoint: api.coord([api.value(0), 0])
                    },
                    style: {
                      fill: '#61F8FF'
                    }
                  }
                ]
              }
            },
            data: this.optionData
          },
          {
            name: '类型',
            type: 'bar',
            z: 0,
            tooltip: {
              show: false
            },
            data: this.bgArr,
            barWidth: '40%',
            itemStyle: {
              normal: {
                color: 'rgba(255,255,255,0.05)' // 0% 处的颜色
              }
            }
          }
        ]
      })
    },
    clickProvince(param) {
      console.log('点击省份数据值')
      const data = {
        provinceId: param.data.provinceId, // 当前点击省份对应的ID
        provinceName: param.name // 当前点击省份对应的ID
      }
      this.$emit('clickDealProvince', data)
    }
  }
}
</script>
